<template>
  <div class="tender">
    <!-- 筛选头部 -->
    <div class="search-box">
      <el-form ref="searchForm" :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="招标区域：">
          <el-select v-model="searchForm.address" size="medium" placeholder="选择招标区域">
            <el-option v-for="item in addressList" :key="item.areaId" :label="item.areaName" :value="item.areaId" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目类型：">
          <el-select v-model="searchForm.typeId" size="medium" placeholder="选择项目类型">
            <el-option label="不限" value="0" />
            <el-option v-for="item in category" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间：">
          <el-select v-model="searchForm.days" size="medium" placeholder="选择发布时间">
            <el-option label="不限" value="0" />
            <el-option label="近七天" value="近七天" />
            <el-option label="近一个月" value="近一个月" />
            <el-option label="近三个月" value="近三个月" />
            <el-option label="近半年" value="近半年" />
            <el-option label="近一年" value="近一年" />
          </el-select>
        </el-form-item>
        <el-form-item label="招标状态：">
          <el-select v-model="searchForm.tenderStatus" size="medium" placeholder="选择招标状态">
            <el-option label="中标结果" value="1" />
            <el-option label="招标公告" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="medium" @click="toSearch">查 询</el-button>
          <el-button size="medium" @click="resetSearchInfo">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 招标列表 -->
    <div class="ad-list-wrapper">
      <div class="ad-list">
        <el-menu default-active="1" class="menu-header" mode="horizontal" @select="menuHandleSelect">
          <el-menu-item index="1">全部招标项目</el-menu-item>
          <el-menu-item index="2">收藏的招标项目</el-menu-item>
        </el-menu>
        <!-- list -->
        <div v-show="showMenuBodyIndex === 1" v-loading="loading1" class="box">
          <div v-if="list.length === 0" class="none">
            暂无招标信息
          </div>
          <table v-else width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
            <thead>
              <tr>
                <th class="index">序号</th>
                <th>招标项目标题</th>
                <th>项目类型</th>
                <th>地区</th>
                <th>招标状态</th>
                <th>公布时间</th>
                <th class="func">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(tender, index) in list" :key="tender.id" class="list-item">
                <td>{{ (index + 1 + pageSize1 * ( currentPage1 - 1 )) | addZeroPrefix }}</td>
                <td>{{ tender.name }}</td>
                <td>{{ tender.typeId }}</td>
                <td>{{ tender.address }}</td>
                <td>{{ tender.tenderStatus === '1' ? '中标结果' : '招标公告' }}</td>
                <td class="create-date">{{ new Date(tender.createDate) | getDate }}</td>
                <td>
                  <router-link :to="{name: 'TenderDetail', query: { res: JSON.stringify(tender) }}">
                    <el-button type="text">查看</el-button></router-link>
                  <el-divider direction="vertical" />
                  <el-button type="text" @click="collection(tender.id)">收藏</el-button>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              :current-page.sync="currentPage1"
              :page-size="pageSize1"
              layout="prev, pager, next, sizes, jumper"
              :total="pageCount1"
              :hide-on-single-page="true"
              :page-sizes="[10, 20, 30, 50]"
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
            />
          </div>
        </div>
        <!-- 收藏列表 -->
        <div v-show="showMenuBodyIndex === 2" v-loading="loading2" class="box">
          <div v-if="collectionList.length === 0" class="none">
            您暂未收藏招标信息
          </div>
          <table v-else width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
            <thead>
              <tr>
                <th class="index">序号</th>
                <th>招标项目标题</th>
                <th>项目类型</th>
                <th>地区</th>
                <th>招标状态</th>
                <th>公布时间</th>
                <th class="func">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(tender, index) in collectionList" :key="tender.id" class="list-item">
                <td>{{ (index + 1 + pageSize2 * ( currentPage2 - 1 )) | addZeroPrefix }}</td>
                <td>{{ tender.name }}</td>
                <td>{{ tender.typeId }}</td>
                <td>{{ tender.address }}</td>
                <td>{{ tender.tenderStatus === '1' ? '中标结果' : '招标公告' }}</td>
                <td class="create-date">{{ new Date(tender.createDate) | getDate }}</td>
                <td>
                  <router-link :to="{name: 'TenderDetail', query: { res: JSON.stringify(tender) }}">
                    <el-button type="text">查看</el-button></router-link>
                  <el-divider direction="vertical" />
                  <el-button type="text" @click="cancelCollection(tender.id)">取消收藏</el-button>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              :current-page.sync="currentPage2"
              :page-size="pageSize2"
              layout="prev, pager, next, sizes, jumper"
              :total="pageCount2"
              :hide-on-single-page="true"
              :page-sizes="[10, 20, 30, 50]"
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange2"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getaddress } from '@/api/other';
import { getCategory, getList, collection, getCollectionList, cancelCollection } from '@/api/tender';
import { mapGetters } from 'vuex';
export default {
  name: 'TenderList',
  data() {
    return {
      loading1: false,
      loading2: false,
      showMenuBodyIndex: 1,
      list: [],
      collectionList: [],
      addressList: [],
      category: [],
      searchForm: {
        tenderStatus: '',
        address: '',
        typeId: '',
        days: ''
      },
      // 分页
      pageSize1: 10,
      currentPage1: 1,
      pageCount1: 1,

      pageSize2: 10,
      currentPage2: 1,
      pageCount2: 1,

      canRequstList: true,
      canRequstCollectionList: true
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  mounted() {
    this.getList();
    this.getCollectionList();
    this.getaddress();
    this.getCategory();
  },
  methods: {
    getaddress(areaLevel, parentId) {
      new Promise((resolve, reject) => {
        getaddress({ parentId: '' }).then(res => {
          const list = res.data;
          list.unshift({
            'areaId': '0',
            'areaName': '不限'
          });
          this.addressList = list;
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    },
    getCategory() {
      new Promise((resolve, reject) => {
        getCategory().then(res => {
          this.category = res.data;
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    },
    collection(tenderId) {
      new Promise((resolve, reject) => {
        collection({ tenderId, shopId: this.shopInfo.id }).then(res => {
          this.$message({
            type: 'success',
            message: '收藏成功'
          });
          this.canRequstCollectionList = true;
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    },
    getList() {
      this.loading1 = true;
      const { address, typeId, days, tenderStatus } = this.searchForm;
      const pageSize = this.pageSize1;
      const pageNo = this.currentPage1;
      new Promise((resolve, reject) => {
        this.canRequstList && getList({ address, typeId, days, tenderStatus, pageSize, pageNo }).then(res => {
          this.loading1 = false;
          this.pageCount1 = res.data.size;
          this.list = res.data.tenders;
          this.canRequstList = false;
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    },
    getCollectionList() {
      this.loading2 = true;
      const shopId = this.shopInfo.id;
      const pageSize = this.pageSize2;
      const pageNo = this.currentPage2;
      new Promise((resolve, reject) => {
        this.canRequstCollectionList && getCollectionList({ shopId, pageSize, pageNo }).then(res => {
          this.loading2 = false;
          this.pageCount2 = res.data.size;
          this.collectionList = res.data.tenders;
          this.canRequstCollectionList = false;
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    },
    // 点击查询按钮
    toSearch() {
      this.canRequstList = true;
      this.getList();
    },
    // 重置表单（表头）
    resetSearchInfo(formName) {
      Object.assign(this.$data.searchForm, this.$options.data().searchForm);
    },
    menuHandleSelect(key, keyPath) {
      this.getList();
      this.getCollectionList();
      this.showMenuBodyIndex = key++;
    },
    cancelCollection(id) {
      new Promise((resolve, reject) => {
        cancelCollection({ id }).then(res => {
          this.$message({
            type: 'success',
            message: '取消收藏成功'
          });
          this.canRequstCollectionList = true;
          this.getCollectionList();
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    },
    // 每页多少条
    handleSizeChange1(val) {
      this.canRequstList = true;
      this.pageSize1 = val;
      this.currentPage1 = 1;
      this.getList();
    },
    // 当前页码
    handleCurrentChange1(val) {
      this.canRequstList = true;
      this.currentPage1 = val;
      this.getList();
    },
    // 每页多少条
    handleSizeChange2(val) {
      this.canRequstCollectionList = true;
      this.pageSize1 = val;
      this.currentPage1 = 1;
      this.getList();
    },
    // 当前页码
    handleCurrentChange2(val) {
      this.canRequstCollectionList = true;
      this.currentPage1 = val;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
.tender {
  font-size: $fontSizeBase;
  color: $textColorDark;
  height: 100%;
  line-height: 1.6;
  .box{
    min-height: calc(100vh - 400px);
    position: relative;
  }
  p {
    padding: 0;
    margin: 0;
  }
}

.search-box {
  background-color: #fff;
  height: 80px;
  display: flex;
  align-items: center;
  padding-left: 30px;
  margin-bottom: 10px;

  /deep/ .el-form-item {
    margin-bottom: 0;
  }
}
.ad-list-wrapper {
  background-color: #fff;
  padding: 0 35px 35px 20px;
  box-sizing: border-box;

  .none {
    min-height: 54vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}
.ad-list {
  table {
    width: 100%;
    float: none;
    margin-top: 20px;
    th,
    td {
      text-align: left;
      &:first-child {
        padding-left: 20px;
        width: 70px;
        font-weight: bolder;
      }
      &:nth-child(2){
        width: 40%;
        padding-right: 50px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: bolder;
      }
    }

    th {
      height: 50px;
      background-color: #F6F8F9;
    }

    td {
      border-bottom: 1px solid $borderColor;
      padding: 20px 0;
      vertical-align: top;
      &:nth-last-child(2){
        color: $textColorBase;
      }
      .el-button--text{
        padding: 0;
      }
    }
  }
}
.pagination {
  width: 100%;
  margin-top: 30px;
  text-align: center;
}
</style>
